{% extends 'base.html' %}
{% block title %}SoloX - {% if lan == 'cn' %} 报告分析 {% else %} Analysis {% endif %}{% endblock %}

{% block css %}{% endblock %}

{% block page_title %}
<a class="active" style="color: #1e71df" href="/report?lan={{ lan }}">{% if lan == 'cn' %} 报告管理 {% else %} Report {% endif %}</a>
<svg t="1635085520789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="165732" width="200" height="200"><path d="M360.704 280.746667l45.226667-45.226667 246.570666 246.528a42.666667 42.666667 0 0 1 0 60.330667l-246.528 246.570666-45.22666601-45.269333 231.42400001-231.466667-231.466667-231.424z" p-id="165733"></path></svg>
{{ app }}
<svg t="1635085520789" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="165732" width="200" height="200"><path d="M360.704 280.746667l45.226667-45.226667 246.570666 246.528a42.666667 42.666667 0 0 1 0 60.330667l-246.528 246.570666-45.22666601-45.269333 231.42400001-231.466667-231.466667-231.424z" p-id="165733"></path></svg>
{{ scene }}
{% endblock %}

{% block ms_auto %}
<div class="col-auto ms-auto d-print-none">
    <div class="btn-list">
        <a class="btn" data-bs-toggle="modal" data-bs-target="#modal-compare">
            <svg t="1682562949101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20010" width="50" height="50"><path d="M478.976 428.6976h372.8896c36.096 0 65.3312-29.2352 65.3312-65.3312V169.3696c0-36.096-29.2352-65.3312-65.3312-65.3312H478.976c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.0448 29.2352 65.3312 65.3312 65.3312zM533.6064 609.1776H160.7168c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.096 29.2352 65.3312 65.3312 65.3312h372.8896c36.096 0 65.3312-29.2352 65.3312-65.3312v-193.9968c0-36.096-29.2352-65.3312-65.3312-65.3312zM952.1152 550.5024l-76.4416-79.0016a43.4176 43.4176 0 0 0-57.856-4.096l-84.5824 65.8432a43.37664 43.37664 0 0 0-7.5776 60.928c14.7456 18.8928 41.984 22.3232 60.928 7.5776l9.3184-7.2704c-0.9728 8.2432-2.4576 16.8448-4.5568 25.6512-15.9744 65.6896-60.8256 112.5376-133.376 139.3664-22.4768 8.2944-33.9968 33.28-25.7024 55.7568 6.4512 17.5104 23.0912 28.3648 40.7552 28.3648 5.0176 0 10.0864-0.8704 15.0528-2.7136 135.5264-50.0736 184.2176-151.1424 194.816-237.1072l6.8608 7.0656a43.25888 43.25888 0 0 0 31.232 13.2096c10.8544 0 21.76-4.0448 30.1568-12.1856 17.152-16.64 17.6128-44.1344 0.9728-61.3888zM189.44 578.5088c10.752 0 21.504-3.9936 29.8496-11.8784l77.824-73.6768c17.408-16.4864 18.176-43.9808 1.6896-61.3888-16.4864-17.408-43.9808-18.176-61.3888-1.6896l-8.6016 8.1408c0.2048-8.2944 0.8192-16.9984 2.0992-25.9584 9.5232-66.9184 49.664-117.9136 119.2448-151.6032 21.6064-10.4448 30.6176-36.4032 20.1728-58.0096-10.4448-21.6064-36.4032-30.6176-58.0096-20.1728-130.048 62.976-168.7552 168.3456-170.9568 254.9248l-7.4752-6.4a43.39712 43.39712 0 1 0-56.2688 66.0992l83.712 71.2192a42.98752 42.98752 0 0 0 28.1088 10.3936z" fill="#2595E8" p-id="20011"></path><path d="M883.2 112.0256a65.28 65.28 0 0 0-31.2832-7.9872H478.976c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.096 29.2352 65.3312 65.3312 65.3312h372.8896a65.024 65.024 0 0 0 40.704-14.2848c9.216-42.7008 14.1824-86.9376 14.1824-132.4032 0.0512-58.9824-8.2944-115.9168-23.552-169.984zM657.92 759.5008c-17.8176 6.5536-28.672 23.6032-28.3136 41.5744 33.28-22.3232 64.3072-47.7696 92.6208-75.8784-18.2272 13.6704-39.6288 25.1392-64.3072 34.304zM771.7376 669.6448c46.08-58.112 82.0736-124.5696 105.2672-196.8128l-1.28-1.3312a43.4176 43.4176 0 0 0-57.856-4.096l-84.5824 65.8432a43.37664 43.37664 0 0 0-7.5776 60.928c14.7456 18.8928 41.984 22.3232 60.928 7.5776l9.3184-7.2704c-0.9728 8.2432-2.4576 16.8448-4.608 25.6512-4.4032 17.92-10.9568 34.4064-19.6096 49.5104zM533.6064 609.1776H160.7168c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 3.3792 0.3584 6.656 0.8192 9.8816 58.7776 18.3296 121.2416 28.16 186.0096 28.16 115.6096 0 223.8464-31.5392 316.7232-86.3232v-145.7152c0-36.096-29.2352-65.3312-65.3312-65.3312z" fill="#3A9CED" p-id="20012"></path><path d="M734.208 104.0384H478.976c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.096 29.2352 65.3312 65.3312 65.3312h136.5504c67.5328-92.2624 110.2848-203.6736 118.6816-324.6592zM95.3856 684.3392c5.3248 0.1536 10.6496 0.4096 16.0256 0.4096 107.9296 0 209.408-27.392 297.984-75.52H160.7168c-36.096 0-65.3312 29.2352-65.3312 65.3312v9.7792z" fill="#59ADF8" p-id="20013"></path><path d="M312.32 182.3232C183.296 244.736 144.2304 348.928 141.4656 435.1488c31.8976-9.984 62.5664-22.5792 92.0576-37.3248C246.4768 337.92 285.6448 291.7376 350.1568 260.5056c21.6064-10.4448 30.6176-36.4032 20.1728-58.0096-10.4448-21.6064-36.4544-30.6176-58.0096-20.1728zM72.6528 435.712c-4.608 5.4272-7.4752 11.7248-9.0112 18.2272 25.9072-4.5568 51.3024-10.5472 75.9808-18.2272l-5.7856-4.9152c-18.2272-15.5136-45.6192-13.312-61.184 4.9152zM519.8848 104.0384h-40.9088c-36.096 0-65.3312 29.2352-65.3312 65.3312V262.144a624.7936 624.7936 0 0 0 106.24-158.1056z" fill="#6BC2FC" p-id="20014"></path></svg>
            {% if lan == 'cn' %} 结果比对 {% else %} Compare {% endif %}
        </a>
        <a onclick="saveHtml('{{ platform }}','{{ scene }}')" class="btn">
            <svg t="1682566365235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26441" width="50" height="50"><path d="M707.2 79.9H238.6c-11.6 0-21 9.4-21 21V923c0 11.6 9.4 21 21 21h704.9V316.3L707.2 79.9" fill="#FFFFFF" p-id="26442"></path><path d="M943.6 960h-705c-20.4 0-37-16.6-37-37V100.9c0-20.4 16.6-37 37-37h468.6c4.2 0 8.3 1.7 11.3 4.7L954.9 305c3 3 4.7 7.1 4.7 11.3V944c0 8.9-7.2 16-16 16z m-705-864.1c-2.7 0-5 2.2-5 5V923c0 2.7 2.2 5 5 5h689V323l-227-227h-462z" fill="#00365B" p-id="26443"></path><path d="M943.6 316.3H707.2V79.9z" fill="#FFFFFF" p-id="26444"></path><path d="M943.6 332.3H707.2c-8.8 0-16-7.2-16-16V79.9c0-6.5 3.9-12.3 9.9-14.8s12.9-1.1 17.4 3.5L954.9 305c4.6 4.6 5.9 11.5 3.5 17.4-2.5 6-8.3 9.9-14.8 9.9z m-220.4-32H905L723.2 118.6v181.7z" fill="#00365B" p-id="26445"></path><path d="M104.7 414.2h698.8c22.4 0 40.6 19.8 40.6 44.3v301.4c0 24.5-18.2 44.3-40.6 44.3H104.7c-22.4 0-40.6-19.8-40.6-44.3V458.5c-0.1-24.5 18.1-44.3 40.6-44.3z" fill="#C24978" p-id="26446"></path><path d="M241.1 701.6c2.9 3.3 7.7 4.9 14.4 4.7 6.6-0.2 11.4-1.8 14.1-4.7s4.1-6.3 4.1-10.1V516.8c0-3.8-1.5-7.2-4.4-10.3-2.9-3-7.7-4.6-14.4-4.6-7 0-11.8 1.6-14.4 4.8-2.6 3.2-3.8 6.6-3.8 10v68.7H150v-68.7c0-3.8-1.4-7.2-4.1-10.3-2.8-3-7.5-4.6-14.1-4.6s-11.4 1.6-14.4 4.8c-2.9 3.2-4.4 6.6-4.4 10v174.7c0 3.4 1.5 6.8 4.4 10.1 2.9 3.3 7.7 4.9 14.4 4.7 6.6-0.2 11.4-1.8 14.1-4.7s4.1-6.3 4.1-10.1v-74.1h86.6v74.1c0.1 3.6 1.5 7 4.5 10.3z m128.1 4.7c6.6 0 11.4-1.5 14.2-4.6 2.8-3 4.3-6.5 4.3-10.3V537.9h36.5c3.4 0 6.7-1.2 10-3.7 3.2-2.5 4.8-6.7 4.8-12.8 0-5.9-1.5-10.1-4.6-12.7-3-2.6-6.5-3.8-10.3-3.8h-110c-3.8 0-7.2 1.3-10.3 3.8-3 2.6-4.6 6.8-4.6 12.7 0 6.1 1.6 10.4 4.8 12.8 3.2 2.5 6.6 3.7 10 3.7h36.5v153.6c0 3.4 1.4 6.7 4.3 10 3 3.2 7.7 4.8 14.4 4.8z m267.7-4.1c2.2 2.9 6.3 4.3 12.4 4.1 4.4 0 7.8-0.6 10.3-1.9 2.5-1.2 4.3-2.8 5.4-4.8 1.1-2 1.8-4.3 1.9-7 0.1-2.7 0-5.4-0.4-8.3L642 523.6c-1.1-7-3.9-12.4-8.4-16.1-4.5-3.7-9.5-5.6-15-5.6-5.7 0-10.7 1.5-15 4.4-4.3 2.9-7.6 8.9-10.1 17.8l-31.6 119.7-32.5-119.1c-2.7-9.1-6.1-15.2-10.3-18.2-4.2-3-9.3-4.6-15.4-4.6s-11.2 1.8-15.2 5.4c-4.1 3.6-6.6 8.7-7.6 15.4l-24.5 161.6c-1.3 8-0.9 13.6 1.4 17 2.3 3.3 6.4 5 12.3 5 7.2 0 12.2-1.7 15-5 2.8-3.3 4.6-8.4 5.6-15.2L504 585.2c0.8-4.6 1.9-6.8 3.3-6.8s2.8 2.3 4.1 6.8c5.3 18.4 10.7 36.6 16.1 54.6 5.4 18 10.9 36.1 16.4 54.6 0.6 2.1 1.2 3.8 1.9 5.3 0.7 1.4 1.7 2.7 3 3.7s3 1.8 5.1 2.3 4.7 0.7 8 0.7c6.1 0 10.2-1.1 12.4-3.3s3.8-5.1 4.7-8.7L610.9 585c1.3-4.4 2.8-6.6 4.3-6.6s2.7 2.2 3.4 6.6l13.7 102.9c0.8 6.5 2.4 11.3 4.6 14.3z m145.8 1.3c3.4 0 6.7-1.2 10-3.7 3.2-2.5 4.8-6.7 4.8-12.8 0-5.9-1.5-10.1-4.6-12.7-3-2.6-6.5-3.8-10.3-3.8h-55.9v-154c0-4.6-1.7-8.1-5.1-10.7-3.4-2.6-7.9-3.8-13.4-3.8-5.1 0-9.5 1.3-13.1 3.8-3.6 2.6-5.4 6.1-5.4 10.7V683c0 5.7 1.8 10.5 5.4 14.5 3.6 4 8.5 6 14.8 6h72.8z" fill="#FFFFFF" p-id="26447"></path></svg>
            {% if lan == 'cn' %} 保存Html {% else %} Save Html {% endif %}
        </a>
        <a download="report.png" onclick="screenshot('sceen-body','report.png')" class="btn">
            <svg t="1681980127752" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11730" width="50" height="50"><path d="M957.31 368.25L903.1 732.12c-6 40.19-33.93 71.32-69.35 82.48a96.61 96.61 0 0 1-44.19 3.26L213.21 727c-39.51-6.23-70-35.53-80.55-72.54l90.55-64.06L363.29 702l193.4-234.78L847.8 681.67V394c0-56.57-44.59-102.43-99.6-102.43H177.34l6.73-45.17c8.33-55.92 59.16-94.3 113.53-85.73l576.35 90.83c54.37 8.56 91.69 60.83 83.36 116.75z" fill="#C5E3FF" p-id="11731"></path><path d="M804.86 831.57a110.71 110.71 0 0 1-17.24-1.36l-576.35-90.83c-42.89-6.76-78.46-38.74-90.62-81.47a12.5 12.5 0 0 1 4.8-13.62L216 580.22a12.5 12.5 0 0 1 15 0.43l130.45 103.9L547 459.27a12.5 12.5 0 0 1 17.06-2.12L835.3 656.93V394c0-49.59-39.07-89.93-87.1-89.93H177.34A12.5 12.5 0 0 1 165 289.71l6.73-45.17a114.5 114.5 0 0 1 45.56-76.09 109.35 109.35 0 0 1 82.29-20.14l576.35 90.83c61 9.62 103.11 68.37 93.78 131L915.46 734A115.87 115.87 0 0 1 889 792.38a112.1 112.1 0 0 1-51.45 34.14 108.3 108.3 0 0 1-32.69 5.05zM147.47 659.32c11.42 29.21 37.19 50.55 67.69 55.36l576.35 90.83a83.72 83.72 0 0 0 38.49-2.84c31.84-10 55.68-38.44 60.74-72.4l54.21-363.87c7.31-49.07-25.41-95.08-72.95-102.58L295.65 173a84.54 84.54 0 0 0-63.6 15.6 89.67 89.67 0 0 0-35.62 59.63l-4.59 30.82h556.37c61.81 0 112.1 51.56 112.1 114.93v287.69a12.5 12.5 0 0 1-19.91 10.06L558.81 484.3 372.93 709.93a12.5 12.5 0 0 1-17.44 1.83L222.77 606z" fill="#3D9FF9" p-id="11732"></path><path d="M748.21 877H165.12C103.31 877 53 825.48 53 762.11V394c0-63.37 50.29-114.93 112.1-114.93h583.11c61.81 0 112.1 51.56 112.1 114.93v368.11C860.3 825.48 810 877 748.21 877zM165.13 304c-48 0-87.1 40.34-87.1 89.93v368.18C78 811.7 117.1 852 165.12 852h583.09c48 0 87.1-40.34 87.1-89.93V394c0-49.59-39.07-89.93-87.1-89.93z" fill="#3D9FF9" p-id="11733"></path><path d="M748.21 877H165.12C103.31 877 53 825.48 53 762.11V702a12.5 12.5 0 0 1 5.28-10.2L216 580.22a12.5 12.5 0 0 1 15 0.43l130.45 103.9L547 459.27a12.5 12.5 0 0 1 17.06-2.12L855.22 671.6a12.5 12.5 0 0 1 5.09 10.06v80.44a117 117 0 0 1-15.75 58.77 114.17 114.17 0 0 1-40.07 40.64A109.94 109.94 0 0 1 748.21 877zM78 708.46v53.65C78 811.7 117.1 852 165.12 852h583.09c30.88 0 58.82-16.35 74.74-43.73a92 92 0 0 0 12.36-46.21V688l-276.5-203.7-185.88 225.63a12.5 12.5 0 0 1-17.44 1.83L222.77 606z" fill="#3D9FF9" p-id="11734"></path><path d="M847.8 681.67v80.44a104.16 104.16 0 0 1-14.05 52.49c-17.39 29.91-49.19 49.94-85.54 49.94H165.12c-55 0-99.6-45.86-99.6-102.43V702l67.14-47.5 90.55-64.06L363.29 702l193.4-234.78z" fill="#C5E3FF" p-id="11735"></path><path d="M748.21 877H165.12C103.31 877 53 825.48 53 762.11V702a12.5 12.5 0 0 1 5.28-10.2L216 580.22a12.5 12.5 0 0 1 15 0.43l130.45 103.9L547 459.27a12.5 12.5 0 0 1 17.06-2.12L855.22 671.6a12.5 12.5 0 0 1 5.09 10.06v80.44a117 117 0 0 1-15.75 58.77 114.17 114.17 0 0 1-40.07 40.64A109.94 109.94 0 0 1 748.21 877zM78 708.46v53.65C78 811.7 117.1 852 165.12 852h583.09c30.88 0 58.82-16.35 74.74-43.73a92 92 0 0 0 12.36-46.21V688l-276.5-203.7-185.88 225.63a12.5 12.5 0 0 1-17.44 1.83L222.77 606z" fill="#3D9FF9" p-id="11736"></path><path d="M226.91 418.1m-69.43 0a69.43 69.43 0 1 0 138.86 0 69.43 69.43 0 1 0-138.86 0Z" fill="#C5E3FF" p-id="11737"></path><path d="M226.91 500a81.93 81.93 0 1 1 81.93-81.93A82 82 0 0 1 226.91 500z m0-138.86a56.93 56.93 0 1 0 56.93 56.93 57 57 0 0 0-56.93-56.9z" fill="#3D9FF9" p-id="11738"></path></svg>
            {% if lan == 'cn' %} 保存图片 {% else %} Save Image {% endif %}
        </a>
    </div>
</div>
{% endblock %}

{% block navbar_nav %}
<ul class="navbar-nav">
  <li class="nav-item" id="apm_tab" style="margin-left: 20px;font-weight: bolder;">
    <a class="nav-link" href="/?platform=Android&lan={{ lan }}" >
      <span class="nav-link-icon d-md-none d-lg-inline-block">
        <svg t="1635060342196" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="82258" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FBD000" p-id="82259"></path><path d="M949.6 848H92.8c-4.8 0-8-3.2-8-8s3.2-8 8-8h856.8c4.8 0 8 3.2 8 8s-4 8-8 8z" fill="#074370" p-id="82260"></path><path d="M903.2 776c0 35.2-28.8 64-64 64H203.2c-35.2 0-64-28.8-64-64V293.6c0-35.2 28.8-64 64-64h636c35.2 0 64 28.8 64 64V776z" fill="#415E6D" p-id="82261"></path><path d="M839.2 797.6H203.2c-35.2 0-64-28.8-64-64V776c0 35.2 28.8 64 64 64h636c35.2 0 64-28.8 64-64v-42.4c0 35.2-28.8 64-64 64z" fill="#324D5B" p-id="82262"></path><path d="M839.2 229.6H203.2c-35.2 0-64 28.8-64 64V728h764V293.6c0-35.2-28.8-64-64-64z" fill="#EAEAEA" p-id="82263"></path><path d="M901.6 736H144c-4.8 0-8-3.2-8-8s3.2-8 8-8h757.6c4.8 0 8 3.2 8 8s-4 8-8 8z" fill="#074370" p-id="82264"></path><path d="M816 784m-24 0a24 24 0 1 0 48 0 24 24 0 1 0-48 0Z" fill="#28A5C6" p-id="82265"></path><path d="M216 784m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#3AD0F9" p-id="82266"></path><path d="M280 784m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#FF4848" p-id="82267"></path><path d="M344 784m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#75B600" p-id="82268"></path><path d="M408 784m-16 0a16 16 0 1 0 32 0 16 16 0 1 0-32 0Z" fill="#FFFFFF" p-id="82269"></path><path d="M904 592h-72c-4.8 0-8-3.2-8-8s4-8 8-8h71.2c4.8 0 8 3.2 8 8s-3.2 8-7.2 8zM639.2 664c-3.2 0-6.4-2.4-8-5.6L592 523.2l-14.4 63.2c-0.8 4-4 6.4-8 6.4H391.2c-4 0-7.2-2.4-8-6.4l-21.6-119.2-17.6 73.6c-0.8 4-5.6 7.2-9.6 5.6-4-0.8-7.2-5.6-5.6-9.6L355.2 424c0.8-4 4-6.4 8-6.4s7.2 3.2 8 6.4l27.2 152h166.4L584 488.8c0.8-3.2 4-8.8 8-8.8s6.4 4.8 8 8.8l38.4 132.8 40.8-224.8c0.8-4 4-6.4 8-6.4s7.2 2.4 8 6.4L732 576h76c4.8 0 8 3.2 8 8s-3.2 8-8 8H725.6c-4 0-7.2-2.4-8-6.4l-30.4-146.4-40 218.4c-0.8 3.2-4 6.4-8 6.4 0.8 0 0.8 0 0 0zM305.6 680c-4 0-7.2-2.4-8-6.4L268 536l-15.2 50.4c-0.8 3.2-4 5.6-8 5.6H146.4c-4.8 0-8-3.2-8-8s3.2-8 8-8h92.8l22.4-74.4c0.8-3.2 4.8-5.6 8-5.6 4 0 6.4 2.4 7.2 6.4l28.8 132.8 11.2-47.2c0.8-4 5.6-7.2 9.6-5.6 4 0.8 7.2 5.6 5.6 9.6l-19.2 82.4c0 3.2-4 5.6-7.2 5.6z" fill="#074370" p-id="82270"></path><path d="M776 304h-56c-4.8 0-8-3.2-8-8s3.2-8 8-8h56c4.8 0 8 3.2 8 8s-3.2 8-8 8zM672 304H488c-4 0-8-3.2-8-8s3.2-8 8-8h184c4 0 8 3.2 8 8s-3.2 8-8 8zM424 304H224c-4.8 0-8-3.2-8-8s4-8 8-8h200c4.8 0 8 3.2 8 8s-4 8-8 8zM711.2 344H584c-4.8 0-8-3.2-8-8s3.2-8 8-8h127.2c4.8 0 8 3.2 8 8s-3.2 8-8 8zM528 344H224c-4.8 0-8-3.2-8-8s4-8 8-8h304c4.8 0 8 3.2 8 8s-4 8-8 8z" fill="#ADADAD" p-id="82271"></path><path d="M840 848H200c-40 0-72-32-72-72V296c0-40 32-72 72-72h640c40 0 72 32 72 72v480c0 40-32 72-72 72zM200 240c-31.2 0-56 24.8-56 56v480c0 31.2 24.8 56 56 56h640c31.2 0 56-24.8 56-56V296c0-31.2-24.8-56-56-56H200z" fill="#074370" p-id="82272"></path><path d="M864 553.6c-4.8 0-8-3.2-8-8v-80c0-4.8 3.2-8 8-8s8 3.2 8 8v80c0 4.8-3.2 8-8 8zM864 425.6c-4.8 0-8-3.2-8-8V312c0-22.4-17.6-40-40-40H408c-4.8 0-8-3.2-8-8s3.2-8 8-8h408c31.2 0 56 24.8 56 56v105.6c0 4.8-3.2 8-8 8zM345.6 272H224c-4.8 0-8-3.2-8-8s3.2-8 8-8h121.6c4.8 0 8 3.2 8 8s-4 8-8 8zM64 464c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z m0-48c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM656 176c-17.6 0-32-14.4-32-32s14.4-32 32-32 32 14.4 32 32-14.4 32-32 32z m0-48c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM474.4 124c0-3.2-3.2-6.4-8-7.2l-15.2-2.4c-4-0.8-8.8-4.8-8.8-8.8l-2.4-15.2c-0.8-4-4-8-7.2-8s-6.4 3.2-7.2 8l-2.4 15.2c-0.8 4-4.8 8.8-8.8 8.8l-15.2 2.4c-4 0.8-8 4-8 7.2s3.2 6.4 8 7.2l15.2 2.4c4 0.8 8.8 4.8 8.8 8.8l2.4 15.2c0.8 4 4 8 7.2 8s6.4-3.2 7.2-8l2.4-16.8c0.8-4 4.8-8 8.8-8.8l14.4-0.8c5.6-1.6 8.8-4 8.8-7.2zM502.4 928c0-3.2-3.2-6.4-8-7.2l-15.2-2.4c-4-0.8-8.8-4.8-8.8-8.8l-2.4-15.2c-0.8-4-4-8-7.2-8s-6.4 3.2-7.2 8l-2.4 15.2c-0.8 4-4.8 8.8-8.8 8.8l-15.2 2.4c-4 0.8-8 4-8 7.2s3.2 6.4 8 7.2l15.2 2.4c4 0.8 8.8 4.8 8.8 8.8l2.4 15.2c0.8 4 4 8 7.2 8s6.4-3.2 7.2-8l2.4-16.8c0.8-4 4.8-8 8.8-8.8l14.4-0.8c5.6-1.6 8.8-4 8.8-7.2z" fill="#FFFFFF" p-id="82273"></path></svg>
      </span>
      <span class="nav-link-title strong-text">{% if lan == 'cn' %} 性能测试 {% else %} APM {% endif %}</span>
    </a>
  </li>
  <li class="nav-item active" id="report_tab" style="margin-left: 20px;font-weight: bolder;">
    <a class="nav-link" href="/report?lan={{ lan }}" >
      <span class="nav-link-icon d-md-none d-lg-inline-block">
        <svg t="1643364122000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29349" width="300" height="300"><path d="M777 806.7c0 38.7-31.1 70.3-69.7 70.3H225.9c-38.7 0-69.9-31.6-69.9-70.3V174.4c0-38.7 31.2-70.4 69.9-70.4h481.4c38.7 0 69.7 31.7 69.7 70.4v632.3z" fill="#FFFFFF" p-id="29350"></path><path d="M707.3 886H225.9c-43.5 0-78.9-35.8-78.9-79.3V174.4c0-43.5 35.4-79.4 78.9-79.4h481.4c43.5 0 79.7 35.9 79.7 79.4v632.3c0 43.5-36.2 79.3-79.7 79.3zM225.9 113c-33.7 0-59.9 27.7-59.9 61.4v632.3c0 33.7 26.2 61.3 59.9 61.3h481.4c33.7 0 60.7-27.6 60.7-61.3V174.4c0-33.7-27-61.4-60.7-61.4H225.9z" fill="#282828" p-id="29351"></path><path d="M732 763.1c0 33.3-26.1 60.9-59.4 60.9H251.7c-33.3 0-59.7-27.6-59.7-60.9V226.9c0-33.3 26.4-60.9 59.7-60.9h420.9c33.3 0 59.4 27.5 59.4 60.9v536.2z" fill="#50BCFF" p-id="29352"></path><path d="M361.8 251.9H208.6c-4.9 0-8.9-4-8.9-8.9s4-8.9 8.9-8.9h153.1c4.9 0 8.9 4 8.9 8.9s-3.9 8.9-8.8 8.9zM549.2 313H208.6c-4.9 0-8.9-4-8.9-8.9s4-8.9 8.9-8.9h340.5c4.9 0 8.9 4 8.9 8.9s-3.9 8.9-8.8 8.9zM652 448.4H208.6c-4.9 0-8.9-4-8.9-8.9s4-8.9 8.9-8.9H652c4.9 0 8.9 4 8.9 8.9s-4 8.9-8.9 8.9zM588.4 515.8H208.6c-4.9 0-8.9-4-8.9-8.9s4-8.9 8.9-8.9h379.7c4.9 0 8.9 4 8.9 8.9 0.1 4.9-3.9 8.9-8.8 8.9z" fill="#282828" p-id="29353"></path><path d="M673.3 113.3c0 19.6-15.9 35.5-35.5 35.5h-346c-19.6 0-35.5-15.9-35.5-35.5v-6.7c0-19.6 15.9-35.5 35.5-35.5h346c19.6 0 35.5 15.9 35.5 35.5v6.7z" fill="#1A6DFF" p-id="29354"></path><path d="M637.8 157.6h-346c-24.5 0-44.4-19.9-44.4-44.4v-6.7c0-24.5 19.9-44.4 44.4-44.4h346c24.5 0 44.4 19.9 44.4 44.4v6.7c0 24.5-19.9 44.4-44.4 44.4zM291.9 80c-14.7 0-26.6 11.9-26.6 26.6v6.7c0 14.7 11.9 26.6 26.6 26.6h346c14.7 0 26.6-11.9 26.6-26.6v-6.7c0-14.7-11.9-26.6-26.6-26.6h-346z" fill="#282828" p-id="29355"></path><path d="M849.7 758.4c0 106.3-86.2 192.4-192.4 192.4-106.3 0-192.4-86.2-192.4-192.4C464.8 652.1 551 566 657.3 566c106.2 0 192.4 86.1 192.4 192.4z" fill="#FFFFFF" p-id="29356"></path><path d="M657.3 959.7c-111 0-201.3-90.3-201.3-201.3s90.3-201.3 201.3-201.3 201.3 90.3 201.3 201.3-90.3 201.3-201.3 201.3z m0-384.8c-101.2 0-183.5 82.3-183.5 183.5S556.1 942 657.3 942s183.6-82.3 183.6-183.6c-0.1-101.2-82.4-183.5-183.6-183.5z" fill="#282828" p-id="29357"></path><path d="M657.3 553.6v204.9h203.6c-0.2-112.7-91.2-204-203.6-204.9z" fill="#1A6DFF" p-id="29358"></path><path d="M860.9 767.3H657.3c-4.9 0-8.9-4-8.9-8.9V553.6c0-2.4 0.9-4.6 2.6-6.3 1.7-1.7 3.6-2.4 6.3-2.6 116.9 0.9 212.2 96.8 212.4 213.7 0 2.4-0.9 4.6-2.6 6.3-1.6 1.7-3.9 2.6-6.2 2.6z m-194.8-17.8h185.6C847 649.3 766.2 568 666.1 562.7v186.8z" fill="#282828" p-id="29359"></path><path d="M794.1 903.7c-2.3 0-4.6-0.9-6.3-2.6L652.1 764.7c-3.5-3.5-3.4-9.1 0-12.6 3.5-3.5 9.1-3.4 12.6 0l135.7 136.5c3.5 3.5 3.4 9.1 0 12.6-1.8 1.7-4 2.5-6.3 2.5z" fill="#282828" p-id="29360"></path></svg>
      </span>
      <span class="nav-link-title strong-text">{% if lan == 'cn' %} 报告管理 {% else %} Report {% endif %}</span>
    </a>
  </li>
</ul>
{% endblock %}

{% block page_body %}
<div class="col-12 mb-3">
    <div class="row row-cards">
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-dark text-white avatar">
                                CPU
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                APP
                            </div>
                            <div class="text-muted">
                                Avg：{{ apm_data.cpuAppRate }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-dark text-white avatar">
                                CPU
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 整机 {% else %} Total {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg：{{ apm_data.cpuSystemRate }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-yellow text-white avatar">
                                {% if lan == 'cn' %} 内存 {% else %} MEM {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 物理内存 {% else %} Total {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg：{{ apm_data.totalPassAvg }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% if platform == 'Android' %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-yellow text-white avatar">
                                {% if lan == 'cn' %} 内存 {% else %} MEM {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 交换内存 {% else %} Swap {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg：{{ apm_data.swapPassAvg }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-pink text-white avatar">
                                FPS
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 流畅度 {% else %} FPS {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg：{{ apm_data.fps }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% if platform == 'Android' %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-pink text-white avatar">
                                Jank
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 卡顿 {% else %} Jank {% endif %}
                            </div>
                            <div class="text-muted">
                                All：{{ apm_data.jank }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        {% if platform == 'Android' %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                {% if lan == 'cn' %} 电池 {% else %} BAT {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 电量 {% else %} Level {% endif %}
                            </div>
                            <div class="text-muted">
                                Final: {{ apm_data.batteryLevel }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                {% if lan == 'cn' %} 电池 {% else %} BAT {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 温度 {% else %} Temperature {% endif %}
                            </div>
                            <div class="text-muted">
                                Final: {{ apm_data.batteryTeml }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                {% if lan == 'cn' %} 电池 {% else %} BAT {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 温度 {% else %} Temperature {% endif %}
                            </div>
                            <div class="text-muted">
                                Final: {{ apm_data.batteryTeml }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                {% if lan == 'cn' %} 电池 {% else %} BAT {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                 {% if lan == 'cn' %} 电流 {% else %} Current {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg: {{ apm_data.batteryCurrent }}mA
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                {% if lan == 'cn' %} 电池 {% else %} BAT {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 电压 {% else %} Voltage {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg: {{ apm_data.batteryVoltage }}mW
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-green text-white avatar">
                                {% if lan == 'cn' %} 电池 {% else %} BAT {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 功耗 {% else %} Power {% endif %}
                            </div>
                            <div class="text-muted">
                                Avg: {{ apm_data.batteryPower }}mV
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-blue text-white avatar">
                                {% if lan == 'cn' %} 流量 {% else %} NET {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 上行 {% else %} Send {% endif %}
                            </div>
                            <div class="text-muted">
                                All: {{ apm_data.flow_send }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-blue text-white avatar">
                                {% if lan == 'cn' %} 流量 {% else %} NET {% endif %}
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                {% if lan == 'cn' %} 下行 {% else %} Recieve {% endif %}
                            </div>
                            <div class="text-muted">
                                All: {{ apm_data.flow_recv }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% if platform == 'iOS' %}
        <div class="col-sm-6 col-lg-2">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-purple text-white avatar">
                                GPU
                            </span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">
                                GPU
                            </div>
                            <div class="text-muted">
                                Avg: {{ apm_data.gpu }}%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% if platform == 'Android' %}
<div class="form-selectgroup mb-3">
    <label class="form-selectgroup-item">
        <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked onclick="chartsClick()">
        <span class="form-selectgroup-label">
            <svg t="1709092052830" class="icon me-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25403" width="200" height="200"><path d="M512 256a42.666667 42.666667 0 0 0-42.666667 42.666667v426.666666a42.666667 42.666667 0 0 0 85.333334 0V298.666667a42.666667 42.666667 0 0 0-42.666667-42.666667z m-213.333333 256a42.666667 42.666667 0 0 0-42.666667 42.666667v170.666666a42.666667 42.666667 0 0 0 85.333333 0v-170.666666a42.666667 42.666667 0 0 0-42.666666-42.666667z m426.666666-85.333333a42.666667 42.666667 0 0 0-42.666666 42.666666v256a42.666667 42.666667 0 0 0 85.333333 0v-256a42.666667 42.666667 0 0 0-42.666667-42.666666z m85.333334-341.333334H213.333333a128 128 0 0 0-128 128v597.333334a128 128 0 0 0 128 128h597.333334a128 128 0 0 0 128-128V213.333333a128 128 0 0 0-128-128z m42.666666 725.333334a42.666667 42.666667 0 0 1-42.666666 42.666666H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h597.333334a42.666667 42.666667 0 0 1 42.666666 42.666666z" fill="#0070FF" p-id="25404"></path></svg>
            {% if lan == 'cn' %} 图表 {% else %} Charts {% endif %}
        </span>
    </label>
    <label class="form-selectgroup-item">
        <input type="radio" name="icons" value="user" class="form-selectgroup-input" onclick="diskClick()">
        <span class="form-selectgroup-label">
            <svg t="1709092139564" class="icon me-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34466" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity=".01" p-id="34467"></path><path d="M938.666667 618.666667H85.333333V896h853.333334v-277.333333z" fill="#2F88FF" p-id="34468"></path><path d="M981.333333 938.666667H42.666667v-362.666667h938.666666V938.666667zM128 853.333333h768v-192H128V853.333333z" fill="#333333" p-id="34469"></path><path d="M757.333333 810.666667a53.333333 53.333333 0 1 0 0-106.666667 53.333333 53.333333 0 0 0 0 106.666667z" fill="#FFFFFF" p-id="34470"></path><path d="M127.104 627.413333l-83.541333-17.493333L158.165333 64h708.949334l113.322666 546.005333-83.541333 17.322667L797.696 149.333333H227.456L127.104 627.413333z" fill="#333333" p-id="34471"></path></svg>
            {% if lan == 'cn' %} 磁盘使用情况 {% else %} Disk Usage {% endif %}
        </span>
    </label>
</div>
{% endif %}
<div class="col-12"  id="card-chart">
    <div class="card cpu-card">
        <div class="card-header">
            <div class='card-title'>{% if lan == 'cn' %} CPU使用率 (%) {% else %} CPU Usage (%) {% endif %}</div>
            <div class="card-actions btn-actions">
                <a class="btn"  onclick="initCpuCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="cpu_spinner" role="status" style="display: none;"></span>
                    <svg id="cpu_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>
                
                <a class="btn" id="cpu_png" style="margin-left: 10px;" onclick="screenshot('cpu-card','cpu.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-cpu"></div>
        </div>
    </div>
    <div class="card mem-card mt-3">
        <div class="card-header">
            <div class='card-title'>{% if lan == 'cn' %} 内存 (MB) {% else %} Memory Usage (MB) {% endif %}</div>
            <div class="card-actions btn-actions">
                <a class="btn" onclick="initMemoryCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="mem_spinner" role="status" style="display: none;"></span>
                    <svg id="mem_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>
                
                <a class="btn" id="mem_png" style="margin-left: 10px;" onclick="screenshot('mem-card','mem.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-mem"></div>
        </div>
    </div>
    {% if platform == 'Android' and  apm_data.mem_detail_flag == True %}
    <div class="card mem-detail-card mt-3">
        <div class="card-header">
            <div class='card-title'>{% if lan == 'cn' %} 内存细化参数 (MB) {% else %} Memory Detail (MB) {% endif %}</div>
            <div class="card-actions btn-actions">
                <a class="btn" onclick="initMemoryDetailCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="mem_detail_spinner" role="status" style="display: none;"></span>
                    <svg id="mem_detail_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>
                <a class="btn" id="mem_detail_png" style="margin-left: 10px;" onclick="screenshot('mem-detail-card','mem_detail.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-mem-detail"></div>
        </div>
    </div>
    {% endif %}
    <div class="card fps-card mt-3">
        <div class="card-header">
            <div class='card-title'>
                {% if platform == 'Android' %}
                FPS(HZ) & Jank(Times)
                {% else %}
                FPS (HZ)
                {% endif %}
            </div>
            <div class="card-actions btn-actions">
                <a class="btn"  onclick="initFpsCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="fps_spinner" role="status" style="display: none;"></span>
                    <svg id="fps_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>       
                <a class="btn" id="fps_png" style="margin-left: 10px;" onclick="screenshot('fps-card','fps.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-fps"></div>
        </div>
    </div>
    <div class="card battery-card mt-3">
        <div class="card-header">
            <div class='card-title'>{% if lan == 'cn' %} 电池 {% else %} Battery {% endif %}</div>
            <div class="card-actions btn-actions">
                <a class="btn"  onclick="initBatteryCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="battery_spinner" role="status" style="display: none;"></span>
                    <svg id="battery_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>       
                <a class="btn" id="battery_png" style="margin-left: 10px;" onclick="screenshot('battery-card','battery.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-battery"></div>
        </div>
    </div>
    <div class="card networkdata-card mt-3">
        <div class="card-header">
            <div class='card-title'>{% if lan == 'cn' %} 流量 (KB) {% else %} Network Usage (KB) {% endif %}</div>
            <div class="card-actions btn-actions">
                <a class="btn"  onclick="initNetworkCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="networkdata_spinner" role="status" style="display: none;"></span>
                    <svg id="networkdata_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>       
                <a class="btn" id="networkdata_png" style="margin-left: 10px;" onclick="screenshot('networkdata-card','networkdata.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-networkdata"></div>
        </div>
    </div>
    {% if platform == 'iOS' %}
    <div class="card gpu-card mt-3">
        <div class="card-header">
            <div class='card-title'>{% if lan == 'cn' %} GPU使用率 (%) {% else %} GPU Usage (%) {% endif %}</div>
            <div class="card-actions btn-actions">
                <a class="btn"  onclick="initGpuCharts()">
                    <span class="spinner-border spinner-border-sm me-2" id="gpu_spinner" role="status" style="display: none;"></span>
                    <svg id="gpu_refresh_logo" xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
                    {% if lan == 'cn' %} 刷新 {% else %} Refresh {% endif %}
                </a>       
                <a class="btn" id="gpu_png" style="margin-left: 10px;" onclick="screenshot('gpu-card','gpu.png')">
                    <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                    {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div id="chart-gpu"></div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Disk Usage -->
<div class="card card-disk initial-disk" id="disk_inital_value_table">
    <div class="card-header">
        <h3 class="card-title">
            <svg t="1709257126539" style="margin-right: 10px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20406" width="200" height="200"><path d="M885.3 957.3H140.7c-42.2 0-76.5-34.3-76.5-76.5V136.3c0-42.2 34.3-76.5 76.5-76.5h744.6c42.2 0 76.5 34.3 76.5 76.5v744.6c-0.1 42.1-34.3 76.4-76.5 76.4z m-744.6-851c-16.5 0-29.9 13.4-29.9 29.9v744.6c0 16.5 13.4 29.9 29.9 29.9h744.6c16.5 0 29.9-13.4 29.9-29.9V136.3c0-16.5-13.4-29.9-29.9-29.9H140.7z" fill="#2A68C9" p-id="20407"></path><path d="M938.5 315.8h-851V91.1c0-4.4 3.6-8 8-8h835c4.4 0 8 3.6 8 8v224.7z" fill="#2A68C9" p-id="20408"></path><path d="M961.7 339H64.3V136.3c0-42.2 34.3-76.5 76.5-76.5h744.6c42.2 0 76.5 34.3 76.5 76.5V339z m-850.9-46.5h804.4V136.3c0-16.5-13.4-29.9-29.9-29.9H140.7c-16.5 0-29.9 13.4-29.9 29.9v156.2z m827.7 352.3h-851c-12.9 0-23.3-10.4-23.3-23.3 0-12.8 10.4-23.3 23.3-23.3h851c12.9 0 23.3 10.4 23.3 23.3-0.1 12.9-10.5 23.3-23.3 23.3z" fill="#2A68C9" p-id="20409"></path><path d="M363.4 957.3c-12.9 0-23.3-10.4-23.3-23.3V315.8c0-12.8 10.4-23.3 23.3-23.3s23.3 10.4 23.3 23.3V934c0 12.9-10.4 23.3-23.3 23.3z m299.2 0c-12.9 0-23.3-10.4-23.3-23.3V315.8c0-12.8 10.4-23.3 23.3-23.3s23.3 10.4 23.3 23.3V934c0 12.9-10.5 23.3-23.3 23.3z" fill="#2A68C9" p-id="20410"></path></svg>
            {% if lan == 'cn' %} 初始值 {% else %} Initial Value {% endif %}
        </h3>
        <div class="card-actions btn-actions">      
            <a class="btn" id="initial_disk_png" style="margin-left: 10px;" onclick="screenshot('initial-disk','initial_disk.png')">
                <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
            </a>
        </div>
    </div>
    <div class="table-responsive" style="font-size: 15px;">
        <table id="file_table" class="table card-table table-vcenter text-nowrap datatable">
            <thead>
            <tr>        
                <th style="font-size: 13px;">Filesystem</th>
                <th style="font-size: 13px;">Size(KB)</th>
                <th style="font-size: 13px;">Used(KB)</th>
                <th style="font-size: 13px;">Avail(KB)</th>
                <th style="font-size: 13px;">Use(%)</th>
                <th style="font-size: 13px;">Mounted on</th>
            </tr>
            </thead>
            <tbody>
            {% for disk in initial_disk %}
            <tr>
                <td>{{ disk.filesystem }}</td>
                <td>{{ disk.blocks }}</td>
                <td>{{ disk.used }}</td>
                <td>{{ disk.available }}</td>
                <td>{{ disk.use_percent }}</td>
                <td>{{ disk.mounted }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="card mt-3 card-disk current-disk" id="disk_current_value_table">
    <div class="card-header">
        <h3 class="card-title">
            <svg t="1709257126539" style="margin-right: 10px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20406" width="200" height="200"><path d="M885.3 957.3H140.7c-42.2 0-76.5-34.3-76.5-76.5V136.3c0-42.2 34.3-76.5 76.5-76.5h744.6c42.2 0 76.5 34.3 76.5 76.5v744.6c-0.1 42.1-34.3 76.4-76.5 76.4z m-744.6-851c-16.5 0-29.9 13.4-29.9 29.9v744.6c0 16.5 13.4 29.9 29.9 29.9h744.6c16.5 0 29.9-13.4 29.9-29.9V136.3c0-16.5-13.4-29.9-29.9-29.9H140.7z" fill="#2A68C9" p-id="20407"></path><path d="M938.5 315.8h-851V91.1c0-4.4 3.6-8 8-8h835c4.4 0 8 3.6 8 8v224.7z" fill="#2A68C9" p-id="20408"></path><path d="M961.7 339H64.3V136.3c0-42.2 34.3-76.5 76.5-76.5h744.6c42.2 0 76.5 34.3 76.5 76.5V339z m-850.9-46.5h804.4V136.3c0-16.5-13.4-29.9-29.9-29.9H140.7c-16.5 0-29.9 13.4-29.9 29.9v156.2z m827.7 352.3h-851c-12.9 0-23.3-10.4-23.3-23.3 0-12.8 10.4-23.3 23.3-23.3h851c12.9 0 23.3 10.4 23.3 23.3-0.1 12.9-10.5 23.3-23.3 23.3z" fill="#2A68C9" p-id="20409"></path><path d="M363.4 957.3c-12.9 0-23.3-10.4-23.3-23.3V315.8c0-12.8 10.4-23.3 23.3-23.3s23.3 10.4 23.3 23.3V934c0 12.9-10.4 23.3-23.3 23.3z m299.2 0c-12.9 0-23.3-10.4-23.3-23.3V315.8c0-12.8 10.4-23.3 23.3-23.3s23.3 10.4 23.3 23.3V934c0 12.9-10.5 23.3-23.3 23.3z" fill="#2A68C9" p-id="20410"></path></svg>
            {% if lan == 'cn' %} 当前值 {% else %} Current Value {% endif %}
        </h3>
        <div class="card-actions btn-actions">      
            <a class="btn" id="initial_disk_png" style="margin-left: 10px;" onclick="screenshot('current-disk','current_disk.png')">
                <svg t="1646303797379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5790" width="2000" height="2000"><path d="M897.856 842.56c14.464-6.72 18.624-20.48 9.28-30.848l-241.216-263.296a25.792 25.792 0 0 0-7.68-5.888c-14.016-7.296-33.6-5.184-43.776 4.8l-241.152 233.088-103.808-70.528a30.912 30.912 0 0 0-3.52-1.92c-14.08-7.36-33.664-4.992-43.776 4.864l-101.056 97.728a18.368 18.368 0 0 0-6.08 13.952c0.512 12.288 14.848 22.016 32.128 21.696h732.8a40.768 40.768 0 0 0 17.856-3.648zM259.84 399.68a78.464 78.464 0 0 0 117.504 67.84 78.272 78.272 0 0 0 0-135.744A78.208 78.208 0 0 0 259.84 399.68" p-id="5791"></path><path d="M864.832 872.256H159.232a83.84 83.84 0 0 1-83.776-83.776V235.52a83.84 83.84 0 0 1 83.776-83.776h705.536a83.84 83.84 0 0 1 83.776 83.776v552.96a83.84 83.84 0 0 1-83.712 83.776zM159.232 183.744a51.84 51.84 0 0 0-51.776 51.776v552.96a51.84 51.84 0 0 0 51.776 51.776h705.536a51.84 51.84 0 0 0 51.776-51.776V235.52a51.84 51.84 0 0 0-51.776-51.776H159.232z" p-id="5792"></path></svg>
                {% if lan == 'cn' %} 截图 {% else %} ScreenShot {% endif %}
            </a>
        </div>
    </div>
    <div class="table-responsive" style="font-size: 15px;">
        <table id="file_table" class="table card-table table-vcenter text-nowrap datatable">
            <thead>
            <tr>        
                <th style="font-size: 13px;">Filesystem</th>
                <th style="font-size: 13px;">Size(KB)</th>
                <th style="font-size: 13px;">Used(KB)</th>
                <th style="font-size: 13px;">Avail(KB)</th>
                <th style="font-size: 13px;">Use(%)</th>
                <th style="font-size: 13px;">Mounted on</th>
            </tr>
            </thead>
            <tbody>
            {% for disk in current_disk %}
            <tr>
                <td>{{ disk.filesystem }}</td>
                <td>{{ disk.blocks }}</td>
                <td>{{ disk.used }}</td>
                <td>{{ disk.available }}</td>
                <td>{{ disk.use_percent }}</td>
                <td>{{ disk.mounted }}</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="modal modal-blur fade" id="modal-compare" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% if lan == 'cn' %} 结果比对 {% else %} Compare {% endif %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="api_content">
                            <div class="col apiform">
                                <div class="input-group">
                                    <span class="input-group-text">
                                        {% if lan == 'cn' %} 场景 {% else %} Scene {% endif %}
                                    </span>
                                    {% if lan == 'cn' %}
                                    <select  class="select-scene select2-selection--single" data-placeholder="请选择一个场景">
                                        <option></option>
                                        {% for scene in filter_dir %}
                                        <option>{{ scene }}</option>
                                        {% endfor %}
                                    </select>
                                    {% else %}
                                    <select  class="select-scene select2-selection--single" data-placeholder="Please select a scene">
                                        <option></option>
                                        {% for scene in filter_dir %}
                                        <option>{{ scene }}</option>
                                        {% endfor %}
                                    </select>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancel</a>
                <a onclick="compare()" class="btn ms-auto">
                    <svg t="1682562949101" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20010" width="50" height="50"><path d="M478.976 428.6976h372.8896c36.096 0 65.3312-29.2352 65.3312-65.3312V169.3696c0-36.096-29.2352-65.3312-65.3312-65.3312H478.976c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.0448 29.2352 65.3312 65.3312 65.3312zM533.6064 609.1776H160.7168c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.096 29.2352 65.3312 65.3312 65.3312h372.8896c36.096 0 65.3312-29.2352 65.3312-65.3312v-193.9968c0-36.096-29.2352-65.3312-65.3312-65.3312zM952.1152 550.5024l-76.4416-79.0016a43.4176 43.4176 0 0 0-57.856-4.096l-84.5824 65.8432a43.37664 43.37664 0 0 0-7.5776 60.928c14.7456 18.8928 41.984 22.3232 60.928 7.5776l9.3184-7.2704c-0.9728 8.2432-2.4576 16.8448-4.5568 25.6512-15.9744 65.6896-60.8256 112.5376-133.376 139.3664-22.4768 8.2944-33.9968 33.28-25.7024 55.7568 6.4512 17.5104 23.0912 28.3648 40.7552 28.3648 5.0176 0 10.0864-0.8704 15.0528-2.7136 135.5264-50.0736 184.2176-151.1424 194.816-237.1072l6.8608 7.0656a43.25888 43.25888 0 0 0 31.232 13.2096c10.8544 0 21.76-4.0448 30.1568-12.1856 17.152-16.64 17.6128-44.1344 0.9728-61.3888zM189.44 578.5088c10.752 0 21.504-3.9936 29.8496-11.8784l77.824-73.6768c17.408-16.4864 18.176-43.9808 1.6896-61.3888-16.4864-17.408-43.9808-18.176-61.3888-1.6896l-8.6016 8.1408c0.2048-8.2944 0.8192-16.9984 2.0992-25.9584 9.5232-66.9184 49.664-117.9136 119.2448-151.6032 21.6064-10.4448 30.6176-36.4032 20.1728-58.0096-10.4448-21.6064-36.4032-30.6176-58.0096-20.1728-130.048 62.976-168.7552 168.3456-170.9568 254.9248l-7.4752-6.4a43.39712 43.39712 0 1 0-56.2688 66.0992l83.712 71.2192a42.98752 42.98752 0 0 0 28.1088 10.3936z" fill="#2595E8" p-id="20011"></path><path d="M883.2 112.0256a65.28 65.28 0 0 0-31.2832-7.9872H478.976c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.096 29.2352 65.3312 65.3312 65.3312h372.8896a65.024 65.024 0 0 0 40.704-14.2848c9.216-42.7008 14.1824-86.9376 14.1824-132.4032 0.0512-58.9824-8.2944-115.9168-23.552-169.984zM657.92 759.5008c-17.8176 6.5536-28.672 23.6032-28.3136 41.5744 33.28-22.3232 64.3072-47.7696 92.6208-75.8784-18.2272 13.6704-39.6288 25.1392-64.3072 34.304zM771.7376 669.6448c46.08-58.112 82.0736-124.5696 105.2672-196.8128l-1.28-1.3312a43.4176 43.4176 0 0 0-57.856-4.096l-84.5824 65.8432a43.37664 43.37664 0 0 0-7.5776 60.928c14.7456 18.8928 41.984 22.3232 60.928 7.5776l9.3184-7.2704c-0.9728 8.2432-2.4576 16.8448-4.608 25.6512-4.4032 17.92-10.9568 34.4064-19.6096 49.5104zM533.6064 609.1776H160.7168c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 3.3792 0.3584 6.656 0.8192 9.8816 58.7776 18.3296 121.2416 28.16 186.0096 28.16 115.6096 0 223.8464-31.5392 316.7232-86.3232v-145.7152c0-36.096-29.2352-65.3312-65.3312-65.3312z" fill="#3A9CED" p-id="20012"></path><path d="M734.208 104.0384H478.976c-36.096 0-65.3312 29.2352-65.3312 65.3312v193.9968c0 36.096 29.2352 65.3312 65.3312 65.3312h136.5504c67.5328-92.2624 110.2848-203.6736 118.6816-324.6592zM95.3856 684.3392c5.3248 0.1536 10.6496 0.4096 16.0256 0.4096 107.9296 0 209.408-27.392 297.984-75.52H160.7168c-36.096 0-65.3312 29.2352-65.3312 65.3312v9.7792z" fill="#59ADF8" p-id="20013"></path><path d="M312.32 182.3232C183.296 244.736 144.2304 348.928 141.4656 435.1488c31.8976-9.984 62.5664-22.5792 92.0576-37.3248C246.4768 337.92 285.6448 291.7376 350.1568 260.5056c21.6064-10.4448 30.6176-36.4032 20.1728-58.0096-10.4448-21.6064-36.4544-30.6176-58.0096-20.1728zM72.6528 435.712c-4.608 5.4272-7.4752 11.7248-9.0112 18.2272 25.9072-4.5568 51.3024-10.5472 75.9808-18.2272l-5.7856-4.9152c-18.2272-15.5136-45.6192-13.312-61.184 4.9152zM519.8848 104.0384h-40.9088c-36.096 0-65.3312 29.2352-65.3312 65.3312V262.144a624.7936 624.7936 0 0 0 106.24-158.1056z" fill="#6BC2FC" p-id="20014"></path></svg>
                    {% if lan == 'cn' %} 比对 {% else %} Compare {% endif %}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>

    $(document).ready(function() {
        chartsClick()
        initCpuCharts()
        initMemoryCharts()
        initFpsCharts()
        initBatteryCharts()
        initNetworkCharts()
        if(platform == 'Android'){
            initMemoryDetailCharts()
        }
        if(platform == 'iOS'){
            initGpuCharts()
        }
    });
    
    function chartsClick(){
        var chart_cards = document.getElementById('card-chart')
        chart_cards.style.display = 'block'
        $('.card-disk').hide()
    }

    function diskClick(){
        $('#card-chart').hide()
        $('.card-disk').show()
    }

    function compare(){
        let lan = '{{ lan }}';
        let platform = '{{ platform }}';
        let app = '{{ app }}';
        let scene1 = '{{ scene }}';
        let scene2 = $('.select-scene').val();
        if(scene2){
            window.location.href = '/compare_analysis?app=' + app + '&scene1=' + scene1 + '&scene2=' + scene2 + 
            '&platform=' + platform + '&lan=' + lan
        }else{
            SwalFire('error', 'Scene is empty', '', 2000);
        }
    }

    function saveHtml(platform, scene){
        if(platform=='Android'){
            saveAndroidHtml(scene)
        }else{
            saveiOSHtml(scene)
        }
    }

    function saveAndroidHtml(scene){
        $.ajax({
            url: "/apm/export/html/android",
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene: scene,
                cpu_app:'{{ apm_data.cpuAppRate }}',
                cpu_sys:'{{ apm_data.cpuSystemRate }}',
                mem_total:'{{ apm_data.totalPassAvg }}',
                mem_swap:'{{ apm_data.swapPassAvg }}',
                fps:'{{ apm_data.fps }}',
                jank:'{{ apm_data.jank }}',
                level:'{{ apm_data.batteryLevel }}',
                temperature:'{{ apm_data.batteryTeml }}',
                net_send:'{{ apm_data.flow_send }}',
                net_recv:'{{ apm_data.flow_recv }}'
            },
            beforeSend: function () {
                SwalLoading('Save Html','Saving html.')
            },
            success: function (data) {
                if(data['status']  == 1 ){
                    SwalFire('success', 'Save successuly !', data['path'], 5000);
                }else{
                    SwalFire('error', 'Save failed !', data['msg'], 2000);
                }
            }
        });
    }

    function saveiOSHtml(scene){
        $.ajax({
            url: "/apm/export/html/ios",
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene: scene,
                cpu_app:'{{ apm_data.cpuAppRate }}',
                cpu_sys:'{{ apm_data.cpuSystemRate }}',
                gpu:'{{ apm_data.gpu }}',
                mem_total:'{{ apm_data.totalPassAvg }}',
                fps:'{{ apm_data.fps }}',
                temperature:'{{ apm_data.batteryTeml }}',
                current:'{{ apm_data.batteryCurrent }}',
                voltage:'{{ apm_data.batteryVoltage }}',
                power:'{{ apm_data.batteryPower }}',
                net_send:'{{ apm_data.flow_send }}',
                net_recv:'{{ apm_data.flow_recv }}'
            },
            beforeSend: function () {
                SwalLoading('Save Html','Saving html.')
            },
            success: function (data) {
                if(data['status']  == 1 ){
                    SwalFire('success', 'Save successuly !', data['path'], 5000);
                }else{
                    SwalFire('error', 'Save failed !', data['msg'], 2000);
                }
            }
        });
    }

    function options(type,dataLabels=false) {
        let options = {
            chart: {
                type: type,
                fontFamily: 'inherit',
                height: 240,
                parentHeightOffset: 0,
                toolbar: {
                    show: false,
                },
                animations: {
                    enabled: false
                },
            },
            dataLabels: {
                enabled: dataLabels
            },
            fill: {
                opacity: 1
            },
            stroke: {
                width: 2,
                lineCap: "round",
                curve: "smooth",
            },
            series: [],
            grid: {
                padding: {
                    top: -20,
                    bottom: -4
                },
            strokeDashArray: 4,
            },
            xaxis: {
                name: "time",
                tickAmount:6,
                labels: {
                    rotate: 0,
                }
            },
        };
        return options
    }

    function initCpuCharts(){
        var cpu_chart = new ApexCharts(document.querySelector("#chart-cpu"), options('line'));
        cpu_chart.render();
        $.ajax({
            url: '/apm/log',
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene:'{{ scene }}',
                target:'cpu',
                platform:platform
            },
            beforeSend: function () {
                $('#cpu_spinner').show()
                $('#cpu_refresh_logo').hide()
            },
            complete: function () {
                $('#cpu_spinner').hide()
                $('#cpu_refresh_logo').show()
            },
            success: function (data) {
                cpu_chart.updateSeries([{
                    name: 'app',
                    data: data['cpuAppData']
                },{
                    name: 'total',
                    data: data['cpuSysData']
                }])
            }
        });
    }

    function initBatteryCharts(){
        var battery_chart = new ApexCharts(document.querySelector("#chart-battery"), options('line'));
        battery_chart.render();
        $.ajax({
            url: '/apm/log',
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene:'{{ scene }}',
                target:'battery',
                platform:platform
            },
            beforeSend: function () {
                $('#battery_spinner').show()
                $('#battery_refresh_logo').hide()
            },
            complete: function () {
                $('#battery_spinner').hide()
                $('#battery_refresh_logo').show()
            },
            success: function (data) {
                if(platform == 'Android'){
                    battery_chart.updateSeries([{
                        name: 'level(%)',
                        data: data['batteryLevel']
                    },{
                        name: 'temperature(­°C)',
                        data: data['batteryTem']
                    }])
                }else {
                    battery_chart.updateSeries([{
                        name: 'temperature',
                        data: data['batteryTem']
                    },{
                        name: 'Current',
                        data: data['batteryCurrent']
                    },{
                        name: 'Voltage',
                        data: data['batteryVoltage']
                    },{
                        name: 'Power',
                        data: data['batteryPower']
                    }])
                }
            }
        });
    }

    function initFpsCharts(){
        var fps_chart = new ApexCharts(document.querySelector("#chart-fps"), options('line'));
        fps_chart.render();
        $.ajax({
            url: '/apm/log',
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene:'{{ scene }}',
                target:'fps',
                platform:platform
            },
            beforeSend: function () {
                $('#fps_spinner').show()
                $('#fps_refresh_logo').hide()
            },
            complete: function () {
                $('#fps_spinner').hide()
                $('#fps_refresh_logo').show()
            },
            success: function (data) {
                if(platform == 'Android'){
                    fps_chart.updateSeries([{
                        name: 'fps',
                        data: data['fps']
                    },{
                        name: 'jank',
                        data: data['jank']
                    }])
                }else{
                    fps_chart.updateSeries([{
                        name: 'fps',
                        data: data['fps']
                    }])
                }
            }
        });
    }

    function initGpuCharts(){
        var gpu_chart = new ApexCharts(document.querySelector("#chart-gpu"), options('line'));
        gpu_chart.render();
        $.ajax({
            url: '/apm/log',
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene:'{{ scene }}',
                target:'gpu',
                platform:platform
            },
            beforeSend: function () {
                $('#gpu_spinner').show()
                $('#gpu_refresh_logo').hide()
            },
            complete: function () {
                $('#gpu_spinner').hide()
                $('#gpu_refresh_logo').show()
            },
            success: function (data) {
                gpu_chart.updateSeries([{
                    name: 'gpu',
                    data: data['gpu']
                }])
            }
        });
    }    

    function initMemoryCharts(){
        var mem_chart = new ApexCharts(document.querySelector("#chart-mem"), options('line'));
        mem_chart.render();
        $.ajax({
            url: '/apm/log',
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene:'{{ scene }}',
                target:'mem',
                platform:platform
            },
            beforeSend: function () {
                $('#mem_spinner').show()
                $('#mem_refresh_logo').hide()
            },
            complete: function () {
                $('#mem_spinner').hide()
                $('#mem_refresh_logo').show()
            },
            success: function (data) {
                if(platform == 'Android'){
                    mem_chart.updateSeries([{
                        name: 'total',
                        data: data['memTotalData']
                    },{
                        name: 'swap',
                        data: data['memSwapData']
                    }])
                }else{
                    mem_chart.updateSeries([{
                        name: 'total',
                        data: data['memTotalData']
                    }])
                }
            }
        });
    }
    
    function initMemoryDetailCharts(){
        var mem_detail_chart = new ApexCharts(document.querySelector("#chart-mem-detail"), options('line'));
        mem_detail_chart.render();
        $.ajax({
                url: '/apm/log',
                type: "GET",
                async: true,
                cache: false,
                data:{
                    scene:'{{ scene }}',
                    target:'mem_detail',
                    platform:platform
                },
                beforeSend: function () {
                    $('#mem_detail_spinner').show()
                    $('#mem_detail_refresh_logo').hide()
                },
                complete: function () {
                    $('#mem_detail_spinner').hide()
                    $('#mem_detail_refresh_logo').show()
                },
                success: function (data) {
                    console.log(data)
                    mem_detail_chart.updateSeries([{
                        name: 'java',
                        data: data['memory_detail']['java_heap']
                    },{
                        name: 'native',
                        data: data['memory_detail']['native_heap']
                    },{
                        name: 'code',
                        data: data['memory_detail']['code_pss']
                    },{
                        name: 'stack',
                        data: data['memory_detail']['stack_pss']
                    },{
                        name: 'graphics',
                        data: data['memory_detail']['graphics_pss']
                    },{
                        name: 'private',
                        data: data['memory_detail']['private_pss']
                    },{
                        name: 'system',
                        data: data['memory_detail']['system_pss']
                    },])
                }
            });
    }
    
    function initNetworkCharts(){
        var network_chart = new ApexCharts(document.querySelector("#chart-networkdata"), options('line',false));
        network_chart.render();
        $.ajax({
            url: '/apm/log',
            type: "GET",
            async: true,
            cache: false,
            data:{
                scene:'{{ scene }}',
                target:'flow',
                platform:platform
            },
            beforeSend: function () {
                $('#networkdata_spinner').show()
                $('#networkdata_refresh_logo').hide()
            },
            complete: function () {
                $('#networkdata_spinner').hide()
                $('#networkdata_refresh_logo').show()
            },
            success: function (data) {
                network_chart.updateSeries([{
                    name: 'send',
                    data: data['upFlow']
                },{
                    name: 'recieve',
                    data: data['downFlow']
                }])
            }
        });
    }
</script>
{% endblock %}